<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 30px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
<!--

  单击事件    冒泡行为
         事件的执行可以分为三个阶段
         捕获阶段 :   由外向内   捕获事件源
        事件执行阶段:   执行事件源触发的事件
        事件冒泡阶段 :  由内向外   在冒泡的过程中会触发事件源父节点的相同事件

 vue中的鼠标事件修饰符
   .stop    阻止事件冒泡
   .self   只监听自己的事件触发  排除事件冒泡
   .once   事件只会触发一次
   .prevent   阻止事件的默认行为

  vue中的键盘事件修饰符
   @keyup.enter
  .enter      监听enter按键的弹起事件
  .left
  .right
  .delete 等


-->
<div id="app">

    <div id="box" @click.self="clickDiv">
        <button @click="clickBtn">点击</button>
        <button @click.once="clickOneceBtn">点击一次有效</button>
    </div>
    <a href="http://www.baidu.com" @click.prevent="toHRef">baidu</a>

    <hr>
    <input type="text" placeholder="请输入信息" v-model="info" @keyup.enter="showInfo">
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            info:''
        },
        methods:{
            clickDiv(){
                console.log("clickDiv")
            },
            clickBtn(){
                console.log("clickBtn")
            },
            clickOnceBtn(){
                console.log("clickOnceBtn")
            },
            toHRef(){
                console.log("toHRef")
            },
            showInfo(){
                console.log(this.info)
            }
        }
      })
</script>
</body>
</html>